<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>丝路广惠-搜索</title>
		<link rel="stylesheet" type="text/css" href="../../src/css/base.css?1.0" />
		<style type="text/css">
			header {
				padding: .5rem 1rem;
			}
			section{
				position: relative;
			}
			.one {
				position: relative;
				padding: 0 1rem 0 0;
			}
			
			.one:before {
				content: "";
				position: absolute;
				right: 0;
				bottom: 0;
				border-style: solid;
				border-width: .5rem;
				border-color: #999 transparent transparent transparent;
			}
			
			.nn {
				display: inline-block;
				background: #F6F6F6;
				border-radius: .5rem;
				padding: .5rem 1rem;
				margin: .5rem .5rem .5rem 0;
			}
			
			.ooo {
				position: absolute;
				top: 0;
				background: rgba(0, 0, 0, .6);
				font-size: 1.4rem;
				border-radius: 3px;
				transition: all 2s;
				display: none;
			}
			
			.ooo:before {
				content: "";
				position: absolute;
				top: -2rem;
				left: 25%;
				border-left: 1rem solid transparent;
				border-bottom: 1rem solid rgba(0, 0, 0, .6);
				border-right: 1rem solid transparent;
				border-top: 1rem solid transparent;
			}
			
			.pad-lr {
				padding: .5rem 2rem;
			}
			
			.show {
				display: block;
			}
			
			.hide {
				display: none;
			}
		</style>
	</head>

	<body>
		<header class="setup-btm s12m flexs-al">
			<form class="flex1 body-bg flexs-al padi5m" action="#">
				<span class="one" data-t="0">商品</span>
				<input type="search" placeholder="秋季上新美装" id="param" class="flex1 body-bg padlr5m s12m" />
				<i class="iconfont icon-saoma i2m"></i>
			</form>
			<a href="javascript: history.go(-1)" class="padi5m">取消</a>
		</header>
		<section class="pad1rem">
			<div class="ooo">
				<a class="setup-btm pad-lr blocks huefff"  data-t="0">商品</a>
				<a class="pad-lr blocks huefff"  data-t="1">店铺</a>
			</div>
			<div class="flexs-bw flexs-al">
				<h2>最近搜索</h2>
				<i class="iconfont icon-shanchu "></i>
			</div>
			<ul>
				<li class="nn">补水面膜</li>
				<li class="nn">面膜</li>
				<li class="nn">补水面膜</li>
				<li class="nn">补水面膜</li>
				<li class="nn">补水面膜</li>
			</ul>

			<h2>热门搜索</h2>

			<ul>
				<li class="nn">补水面膜</li>
				<li class="nn">补水面膜</li>
				<li class="nn">补水面膜</li>
				<li class="nn">补水面膜</li>
				<li class="nn">补水面膜</li>
			</ul>
		</section>
		<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="../../src/js/all.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 搜索跳转页面
			document.addEventListener("keypress", function(e) {
				var searchName = $("#param").val(),
					Belong     = silks.getByVal("Belong"),
					part      = $(".one").attr("data-t");
				var sea = "LikeVarchar="+searchName+"&Belong="+Belong+"&part="+part;	
				if(e.keyCode == '13') {
					e.preventDefault();
					
					location.assign("../order/goodslist.html?"+sea)//encodeURIComponent
				}
			});

			$(".one").click(function() {
				$(".ooo").toggleClass("show");
			});
			
			$(".ooo a").click(function () {
				 var $this = $(this),
				 	 $one  = $(".one");
				$one.html($this.text());
				$one.attr("data-t",$this.attr("data-t"));
				$(".ooo").toggleClass("show");
			});
		</script>
	</body>
</html>